<template>
	<div id="fieldManage">
		<div class="breadcrumb">
			<img src="../../../../static/img/venueManage_1.png" class="head_img">
			<span class="title" @click="cancel()">场馆管理</span>
			<span>/ 场地管理</span>
		</div>
		<div class="list">
			<div class="list_head">
				<span>场地列表</span>
				<el-button class="add" type="primary" @click="newField()">添加场地</el-button>
				<el-button class="cancel" type="primary" @click="cancel()">返回</el-button>
			</div>
			<el-table :data="list">
				<el-table-column prop="fieldName" label="场地名称" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="运动项目" prop="sportName">
				</el-table-column>
				<el-table-column prop="fieldsNum" label="场地个数">
				</el-table-column>
				<el-table-column prop="bookDay" label="可预订天数">
				</el-table-column>
				<el-table-column prop="startTime" label="开场时间">
				</el-table-column>
				<el-table-column prop="endTime" label="闭场时间">
				</el-table-column>
				<el-table-column label="场地状态">
					<template scope="scope">
						<span v-if="scope.row.fieldStatus ==0">开启</span>
						<span v-if="scope.row.fieldStatus ==1">关闭</span>
					</template>
				</el-table-column>
				<el-table-column width="300" align="right">
					<template scope="scope">
						<el-button size="small" type="text" @click="priceConfig(scope.row)" v-if="scope.row.fieldStatus==1 || scope.row.bookStatus==1">价格设置</el-button>
						<el-button size="small" type="text" v-if="scope.row.fieldStatus==1" @click="openField(scope.row)">开启场地</el-button>
						<el-button size="small" type="text" v-if="scope.row.fieldStatus==0" @click="closeField(scope.row)">关闭场地</el-button>
						<el-button size="small" type="text" v-if="scope.row.fieldStatus==0 && scope.row.bookStatus==1" @click="openOrCloseFieldBook(scope.row)">开启预定</el-button>
						<el-button size="small" type="text" v-if="scope.row.fieldStatus==0 && scope.row.bookStatus==0" @click="openOrCloseFieldBook(scope.row)">关闭预定</el-button>
						<el-button size="small" type="text" v-if="scope.row.fieldStatus==1" @click="newField(scope.row)">编辑</el-button>
						<el-button size="small" type="text" v-if="scope.row.fieldStatus==1" @click="deleteField(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination v-show="this.totalCount > 0" layout="prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
				 :total="totalCount" @current-change="handleCurrentChange">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";

	export default {
		data() {
			return {
				list: [],
				unid: "",
				venueId: "",
				endTime: "",
				startTime: "",
				totalCount: 0,
				currentPage: parseInt(this.$util.getUrlParam("pageNum")) || 1
			};
		},
		mounted() {
			this.venueId = this.$util.getUrlParam("venueId");
			this.startTime = this.$util.getUrlParam("startTime");
			this.endTime = this.$util.getUrlParam("endTime");
			this.unid = this.$util.getUrlParam("unid");
			this.getFieldList();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			// 根据场馆id获取场地列表
			getFieldList() {
				let url = this.$util.domain + "/erp/api/v20/venue/field/list";

				this.$http({
					url,
					method: "GET",
					params: {
						venueId: this.venueId,
						pageNum: this.currentPage,
						pageSize: 10
					}
				}).then(response => {
					if (response.data.error == 10000) {
						this.list = [];
						let fieldList = response.data.data.data;
						this.totalCount = response.data.data.total * 1;
						if (fieldList && fieldList.length > 0) {
							for (let i = 0; i < fieldList.length; i++) {
								let $fieldName = fieldList[i].name,
									$fieldId = fieldList[i].id,
									$fields = fieldList[i].fields,
									$fieldStatus = fieldList[i].status,
									$startTime = fieldList[i].openStartTime,
									$sportName = fieldList[i].sportItem,
									$fieldsNum = fieldList[i].count,
									$bookDay = fieldList[i].bookDays,
									$bookStatus = fieldList[i].bookStatus,
									$endTime = fieldList[i].openEndTime;

								this.list.push({
									fieldId: $fieldId,
									endTime: $endTime,
									bookDay: $bookDay,
									fieldName: $fieldName,
									startTime: $startTime,
									sportName: $sportName,
									fieldsNum: $fieldsNum,
									bookStatus: $bookStatus,
									fieldStatus: $fieldStatus
								});
							}
						}
					}
				});
			},
			//新增/编辑场地
			newField(row) {
				let params = {
					fieldId: 0,
					unid: this.unid,
					venueId: this.venueId,
					endTime: this.endTime,
					startTime: this.startTime,
					pageNum: this.currentPage
				}
				if (row) {
					params.fieldId = row.fieldId
				}
				this.$util.refreshTo("/#/newField", params);
			},
			//请求分页数据
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getFieldList();
			},
			//开启场地
			openField(row) {
				this.$confirm("您确定要开启“" + row.fieldName + "”吗？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					this.updateStatus(row.fieldId, 0, (response) => {
						if (response.data.error == 10000) {
							this.$util.successMsg("场地开启成功");
							this.getFieldList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => {
					//
				});
			},
			//关闭场地
			closeField(row) {
				this.$confirm("您确定要关闭“" + row.fieldName + "”吗？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					this.updateStatus(row.fieldId, 1, (response) => {
						if (response.data.error == 10000) {
							this.$util.successMsg("场地关闭成功");
							this.getFieldList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => {
					//
				});
			},
			//变更场馆状态
			updateStatus(id, status, callback) {
				let url = this.$util.domain + "/erp/api/v20/venue/field/action";

				this.$http({
					url,
					method: "GET",
					params: {
						fieldId: parseInt(id),
						action: status
					}
				}).then(response => {
					callback(response);
				});
			},
			// 开启或关闭场地预定
			openOrCloseFieldBook(row) {
				let btntext = null;
				if (row.bookStatus == 1) {
					btntext = '开启'
				} else {
					btntext = '关闭'
				}
				this.$confirm(`您确定要${btntext}“` + row.fieldName + "”的预定吗？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					this.updateFieldStatus(row.fieldId, 1 - row.bookStatus, (response) => {
						if (response.data.error == 10000) {
							this.$util.successMsg("删除成功");
							this.getFieldList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => {
					//
				});
			},
			// 变更场地预定状态
			updateFieldStatus(id, status, callback) {
				let url = this.$util.domain + "/erp/api/v20/venue/field/bookstatus";

				this.$http({
					url,
					method: "GET",
					params: {
						bookStatus: status,
						fieldId: id
					}
				}).then(response => {
					callback(response);
				});
			},
			//价格设置
			priceConfig(row) {
				let params = {
					unid: this.unid,
					fieldId: row.fieldId,
					venueId: this.venueId,
					endTime: this.endTime,
					startTime: this.startTime,
					pageNum: this.currentPage,
					fieldName: encodeURI(row.fieldName)
				}
				this.$util.refreshTo("/#/priceConfig", params);
			},
			// 删除场地
			deleteField(row) {
				this.$confirm("场地下产生的单信息将同时被删除，是否继续删除场地？", "温馨提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消"
				}).then(() => {
					let url = this.$util.domain + "/erp/api/v20/venue/field/del";

					this.$http({
						url,
						method: "GET",
						params: {
							fieldId: row.fieldId * 1
						}
					}).then(response => {
						if (response.data.error == 10000) {
							this.$util.successMsg("删除成功");
							this.getFieldList();
						} else {
							this.$util.errorMsg(response.data.message);
						}
					});
				}).catch(() => { });
			},
			//返回
			cancel() {
				location.href = "/#/venueManage";
			}
		}
	};
</script>

<style scoped>
	#fieldManage {
		padding-top: 80px;
		height: calc(100% - 100px);
	}

	.title {
		color: #0398FF;
	}

	.add {
		position: absolute;
		right: 70px;
	}
</style>